<template>
	<view class="address u-flex u-row-center u-col-top">
		<view class="u-padding-top-30" v-if="!list.length">
			<u-empty text="暂无地址,快去添加吧~" mode="address"></u-empty>
		</view>
		<scroll-view scroll-y="true" style="height: 89%;" v-else @scrolltolower="onreachBottom">
			<view class="address-item u-margin-bottom-20" v-for="(item, index) in list" :key="item.id" >
				<view class="address-tag" v-if="item.default ==1">
					<u-tag text="默认" type="success" mode="dark" shape="circleRight" size="mini" />
				</view>
				<u-swipe-action :show="item.show" :index="index" @click="click" @open="open" :options="options" >
					<view class="item u-border-bottom"  @click="selectAddressItem(item)">
						<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
						<view class="title-wrap u-font-32">
							<text class="title u-line-1">{{ item.address }}</text>
						</view>
						<view class="u-flex u-col-center mobile-wrap u-font-32 color-999999 u-margin-top-24">
							<view class="u-margin-right-40">{{item.mobile}}</view>
							<view class="">{{item.name}}</view>
						</view>
					</view>
				</u-swipe-action>
			</view>
			<u-loadmore :status="status" @loadmore="onreachBottom" />
		</scroll-view>
		<view class="" style="position: fixed;bottom: 40rpx;">
			<u-button :custom-style="{
						width:'520rpx',
						height:'70rpx',
						fontSize:'32rpx',
						color:'rgba(255,255,255,1)',
						background:'#F5B340',
						lineHeight:'48rpx',
					}"
			 @click="navigateToAddressInfoView">添加新地址</u-button>
		</view>
	</view>
</template>

<script>
	let meta = {
		current_page: 0,
		per_page: 15
	}
	let type = ""
	export default {
		data() {
			return {
				list: [],
				disabled: false,
				btnWidth: 180,
				show: false,
				status: "loadmore",
				options: [{
						text: '编辑',
						style: {
							backgroundColor: '#007aff'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				]
			};
		},
		onLoad(options) {
			uni.showLoading({
				mask:true,
				title:'数据加载中...'
			})
			this.getAddress()
			uni.$on('updatadetail', (data) => {
				console.log('监听到事件来自 update ，携带参数 msg 为：', data);
				console.log(this.list[data.addressIndex])
				// this.set
				this.$set(this.list, data.addressIndex, data) // 生效
				// this.list[data.addressIndex] = data
			})
			type = options.type
		},
		onReady() {

		},
		onShow() {
			
		},
		methods: {
			selectAddressItem(item){
				console.log(item)
				if(type !== "select"){
					return false
				}
				this.$u.vuex("vuex_address",item)
				uni.navigateBack({
					
				})
			},
			navigateToAddressInfoView() {
				uni.navigateTo({
					url: '../addressinfo/addressinfo'
				})
			},
			click(index, index1) {
				if (index1 == 1) {
					uni.showLoading({
						mask: true,
						title: "删除中..."
					})
					this.deleteAddress(index);
				} else {
					this.list[index].show = false;
					// this.$u.toast(`收藏成功`);
					uni.navigateTo({
						url: `../addressinfo/addressinfo?index=${index}`
					})
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if (index != idx) this.list[idx].show = false;
				});
			},
			onreachBottom() {
				// if (meta.total_pages === meta.current_page) {
				// 	return false
				// }
				if (meta.total_pages === meta.current_page) {
					this.status = 'nomore'
					return false
				}
				this.status = 'loading';
				this.getAddress();
				// if (this.page >= 3) return;
				// this.status = 'loading';
				// this.page = ++this.page;
				// setTimeout(() => {
				// 	this.list += 10;
				// 	if (this.page >= 3) this.status = 'nomore';
				// 	else this.status = 'loading';
				// }, 2000)
				// this.getAddress()
			},
			deleteAddress(index) {
				let params = {
					address_id: this.list[index].id
				}
				this.$u.api.delAddress(params).then(res => {
					uni.hideLoading()
					if (res.errno === "000") {
						this.$u.toast(res.errmsg);
						this.list.splice(index, 1);
					}
				})
			},
			getAddress() {
				console.log(meta)
				let params = {
					page: meta.current_page + 1,
					page_size: meta.per_page,
					timestamp: Number(new Date())
				}
				this.$u.api.getAddress(params).then(res => {
					console.log(res)
					this.status = "loadmore"
					uni.hideLoading()
					if (res.errno === "000") {
						res.result.data.forEach(el => {
							this.list.push({
								show: false,
								...el
							})
						})
						// this.list = res.result.data
						meta = res.result.meta
					}else{
						this.status = 'nomore';
					}
				})
			}
		},
		onUnload() {
			meta = {
				current_page: 0,
				per_page: 15
			}
			this.$off('updatadetail')
		}
	};
</script>

<style>
	.address {
		width: 100vw;
		height: 100vh;
		background: rgb(241, 245, 246);
	}

	.address-item {
		width: 720rpx;
		height: 160rpx;
		background: #ffffff;
		border-radius: 10rpx;
		margin: 0 auto;
		overflow: hidden;
		position: relative;
		/* padding: 34rpx 28rpx;
	box-sizing: border-box; */
	}

	.address-tag {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 3;
	}

	.title-wrap {
		width: 720rpx;
		padding: 26rpx 28rpx;
		padding-bottom: 0;
		box-sizing: border-box;
		margin: 0 auto;
	}

	.title {
		display: inline-block;
		width: 100%;
	}

	.mobile-wrap {
		width: 720rpx;
		padding: 0 28rpx;
		box-sizing: border-box;
		margin: 0 auto;
	}

	.item {
		height: 160rpx;
	}
</style>
